<!-- /*
 * @Author: RDSunday 
 * @Date: 2020-03-22 08:57:05 
 * @Last Modified by:   RDSunday 
 * @Last Modified time: 2020-03-22 08:57:05 
 */ -->
<!-- 水平选项卡设置关闭按钮， -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        /* style the tab */
        div.tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* style the buttons inside the tab */
        div.tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
            /* display: block; */

        }
        div.tab button:hover {
            background-color: #ddd;
        }
        .tabcontent {
            /* display: none; */
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
        /* style the close button */
        .topright {
            float: right;
            cursor: pointer;
            font-size: 20px;

        }
        .topright:hover {
            color: red;
        }
    </style>
</head>
<body>
   
    <!-- 水平选项卡 -->
    <div class="tab">
        <button class="tablinks" onclick="openCity(event,'London')" id="defaultOpen">London</button>
        <button class="tablinks" onclick="openCity(event,'Paris')">Paris</button>
        <button class="tablinks" onclick="openCity(event,'Tokyo')">Tokyo</button>

    </div>
    <div id="London" class="tabcontent">
        <span onclick="this.parentElement.style.display = 'none'" class="topright">X</span>
        <h3>London</h3>
        <p>London is the capital city of England</p>
    </div>
    <div id="Paris" class="tabcontent">
        <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
        <h3>Paris</h3>
        <p>Paris is the capital of France.</p> 
      </div>
      <div id="Tokyo" class="tabcontent">
        <span onclick="this.parentElement.style.display='none'" class="topright">x</span>
        <h3>Tokyo</h3>
        <p>Tokyo is the capital of Japan.</p>
      </div>
      <p>点击x按钮关闭选项卡内容</p>
</body>
</html>